<template>
  <div>
    <section v-if="arrdom.length > 0">
      <div
        class="p-list"
        v-for="(item,index) in arrdom"
        :key="index"
        @click="cliks(item)"
      >
        <div
          class="p-cover"
          :style="{ backgroundImage:'url(' + item.cover + ')'}"
        >
          <!-- <img :src="item.cover" style="width:100%;height:100%"> -->
        </div>
        <div class="shijian">
          <p>
            拼团剩余
            <span>{{item.timedate}}</span>
          </p>
          <section class="yaoqing">
            邀请好友
          </section>
        </div>
      </div>
    </section>
    <section v-else>
      <kong
        :type='co_kong'
        img='https://o6wndwjxn.qnssl.com/WechatIMG3.png'
      ></kong>
    </section>
    <div
      @click="show = false"
      class="marskssss"
      :class="show === true ? 'showmarsksss' : '' "
    >
      <img
        src="https://o6wndwjxn.qnssl.com/%E5%88%86%E4%BA%AB%E9%81%AE%E7%85%A7.png"
        style="width:100%;height:100%"
      >
    </div>
  </div>
</template>

<script>
import wxReady from '@/utils/wxReady'
import { spellgroup } from '@/api/center'
import kong from '@/components/public/kong.vue'
import {
  mapState
} from 'vuex'
export default {
  components: {
    kong
  },
  computed: {
    ...mapState({
      app_id: state => state.app_id,
      user_id: state => state.member_id
    })
  },
  data () {
    return {
      co_kong: '没有拼团',
      arrdom: [],
      show: false,
      curriculum: ''
    }
  },
  created () {
    this.getspellgroup()
  },
  methods: {
    cliks (item) {
      this.show = !this.shhow
      this.curriculum = item
      console.log(this.curriculum)
      this.wxShare()
    },
    getspellgroup () {
      let prams = {
        app_id: this.app_id,
        member_id: this.user_id
      }
      spellgroup(prams).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let {
          code,
          data
        } = res.data
        if (code === 200) {
          this.arrdom = data
          this.arrdom.forEach((element, index) => {
            element.staue = true
            let hour, minute, second, end, start, s
            if (new Date(element.end_time * 1000) - new Date() < 0) {
              element.staue = false
            } else {
              end = new Date(element.end_time * 1000) // 结束时间
              start = new Date() // 当前时间
              s = parseInt((end - start) / 1000) // 时间差
              hour = Math.floor(s / (60 * 60))
              minute = Math.floor(s / 60) - (hour * 60)
              second = Math.floor(s) - (hour * 60 * 60) - (minute * 60)
              if (hour <= 9) {
                hour = `0${hour}`
              }
              if (minute <= 9) {
                minute = `0${minute}`
              }
              if (second <= 9) {
                second = `0${second}`
              }
              this.$set(element, 'timedate', `${hour}:${minute}:${second}`)
              let terval = setInterval(() => {
                start = new Date() // 当前时间
                s = parseInt((end - start) / 1000) // 时间差
                if (s < 0) {
                  clearInterval(terval)
                  element.staue = false
                } else if (s > 0) {
                  hour = Math.floor(s / (60 * 60))
                  minute = Math.floor(s / 60) - (hour * 60)
                  second = Math.floor(s) - (hour * 60 * 60) - (minute * 60)
                  if (hour <= 9) {
                    hour = `0${hour}`
                  }
                  if (minute <= 9) {
                    minute = `0${minute}`
                  }
                  if (second <= 9) {
                    second = `0${second}`
                  }
                  this.$set(element, 'timedate', `${hour}:${minute}:${second}`)
                }
              }, 1000)
            }
          })
        }
      })
    },
    wxShare () {
      let title = this.curriculum.title
      let desc = '了解更多知识，请关注“知运”公众号'
      wxReady(title, desc, 'assembledetails', this.curriculum.cover,
        `&join_class_id=${this.curriculum.join_class_id}&curriculum_id=${this.curriculum.curriculum_id}`
      ).then(() => {
        this.marsk = false
      })
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.wxShare()
    })
  }
}
</script>
<style lang="less" scoped>
.marskssss {
  transition: all 0.3s;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 9900;
  opacity: 0;
  bottom: -1000px;
  // background: rgba(255, 255, 255, 0.9);
  p {
    font-size: 14px;
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
}
.showmarsksss {
  z-index: 9900;
  bottom: 0px;
  opacity: 1;
}
.p-list {
  width: 100%;
  height: calc(100vw * 112 / 750);
  border-bottom: solid calc(100vw * 1 / 750) #e5e5e5;
  padding: 0 calc(100vw * 30 / 750);
  display: flex;
  align-items: center;
}
.p-cover {
  width: calc(100vw * 131 / 750);
  height: calc(100vw * 72 / 750);
  background-color: #fcc;
  background-size: cover;
  background-repeat: no-repeat;
}
.shijian {
  flex: 1;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #7b5d39;
  margin-left: calc(100vw * 20 / 750);
  position: relative;
  span {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #dd5545;
    line-height: 40px;
  }
}
.yaoqing {
  width: calc(100vw * 131 / 750);
  height: calc(100vw * 50 / 750);
  border: 1px solid #da4131;
  color: #da4131;
  border-radius: calc(100vw * 25 / 750);
  font-size: 12px;
  text-align: center;
  line-height: calc(100vw * 50 / 750);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
</style>
